<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #tutorial {
        border: 1px solid black;
    }
    body {
		padding: 0;
		margin: 0;
		background-color: rgba(0, 0, 0, 0.1)
	}

	canvas {
		display: block;
		margin: 200px auto;
	}
</style>

<body>
    <canvas id="tutorial" width="500" height="500"></canvas>
    <canvas id="solar" width="300" height="300"></canvas>
</body>
<script>

    // function draw() {
    //     var canvas = document.getElementById('tutorial');
    //     if (!canvas.getContext) return;
    //     var ctx = canvas.getContext('2d');
    //     ctx.fillStyle = 'rgb(200,0,0)';
    // 绘制矩形
    // ctx.fillRect(10, 10, 55, 50);
    // ctx.fillStyle = 'rgba(0,0,200,0.5)';
    // ctx.fillRect(30, 30, 55, 50);

    // 长方形
    // ctx.fillRect(10, 10, 100, 50);     // 绘制矩形，填充的默认颜色为黑色
    // ctx.strokeRect(10, 70, 100, 50);   // 绘制矩形边框
    // ctx.clearRect(15,15,50,25)  

    // 绘制线段
    // ctx.beginPath();
    // ctx.moveTo(300,50);
    // ctx.lineTo(200,50);
    // ctx.closePath();
    // ctx.stroke();

    // 绘制三角形边框
    // ctx.beginPath();
    // ctx.moveTo(50,50);
    // ctx.lineTo(200,50);
    // ctx.lineTo(200,200)
    // ctx.closePath();
    // ctx.stroke();

    // 填充三角形
    // ctx.beginPath();
    // ctx.moveTo(50,50);
    // ctx.lineTo(200,50);
    // ctx.lineTo(200,200);
    // ctx.fill();

    // 绘制圆弧
    // ctx.beginPath();
    // ctx.arc(50,50,40,0, Math.PI / 2, false);
    // ctx.stroke();


    // 圆弧案列2
    // ctx.beginPath();
    // ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
    // ctx.stroke();

    // ctx.beginPath();
    // ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
    // ctx.closePath();
    // ctx.stroke();

    // ctx.beginPath();
    // ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
    // ctx.fill();

    // ctx.beginPath();
    // ctx.arc(150, 150, 40, 0, Math.PI, false);
    // ctx.fill();


    // 圆弧案列3
    // ctx.beginPath();
    // ctx.moveTo(50,50);
    // // 参数1、2：控制点1坐标     参数3、4：控制点2坐标   参数4：圆弧半径
    // ctx.arcTo(200, 50, 200, 200, 100);
    // ctx.lineTo(200, 200);
    // ctx.stroke();

    // ctx.beginPath();
    // ctx.rect(50, 50, 10, 10);
    // ctx.rect(200, 50, 10, 10);
    // ctx.rect(200, 200, 10, 10);
    // ctx.fill()


    // 添加样式和颜色
    // for (var i = 0; i < 6; i++) {
    //     for (var j = 0; j < 6; j++) {
    //         ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
    //             Math.floor(255 - 42.5 * j) + ',0)';
    //         ctx.fillRect(j * 50, i * 50, 50, 50);
    //     }
    // }

    // }
    // draw();



    // function draw() {
    //     var canvas = document.getElementById('tutorial');
    //     if (!canvas.getContext) return;
    //     var ctx = canvas.getContext("2d");
    //     for (var i = 0; i < 6; i++) {
    //         for (var j = 0; j < 6; j++) {
    //             ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
    //             ctx.strokeRect(j * 50, i * 50, 40, 40);
    //         }
    //     }
    // }
    // draw();
    // /**
    //  返回随机的 [from, to] 之间的整数(包括from，也包括to)
    //  */
    // function randomInt(from, to) {
    //     return parseInt(Math.random() * (to - from + 1) + from);
    // }





    init();

    function init() {
        let canvas = document.querySelector("#solar");
        let ctx = canvas.getContext("2d");
        draw(ctx);
    }

    function draw(ctx) {
        requestAnimationFrame(function step() {
            drawDial(ctx); //绘制表盘
            drawAllHands(ctx); //绘制时分秒针
            requestAnimationFrame(step);
        });
    }
    /*绘制时分秒针*/
    function drawAllHands(ctx) {
        let time = new Date();

        let s = time.getSeconds();
        let m = time.getMinutes();
        let h = time.getHours();

        let pi = Math.PI;
        let secondAngle = pi / 180 * 6 * s;  //计算出来s针的弧度
        let minuteAngle = pi / 180 * 6 * m + secondAngle / 60;  //计算出来分针的弧度
        let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;  //计算出来时针的弧度

        drawHand(hourAngle, 60, 6, "red", ctx);  //绘制时针
        drawHand(minuteAngle, 106, 4, "green", ctx);  //绘制分针
        drawHand(secondAngle, 129, 2, "blue", ctx);  //绘制秒针
    }
    /*绘制时针、或分针、或秒针
     * 参数1：要绘制的针的角度
     * 参数2：要绘制的针的长度
     * 参数3：要绘制的针的宽度
     * 参数4：要绘制的针的颜色
     * 参数4：ctx
     * */
    function drawHand(angle, len, width, color, ctx) {
        ctx.save();
        ctx.translate(150, 150); //把坐标轴的远点平移到原来的中心
        ctx.rotate(-Math.PI / 2 + angle);  //旋转坐标轴。 x轴就是针的角度
        ctx.beginPath();
        ctx.moveTo(-4, 0);
        ctx.lineTo(len, 0);  // 沿着x轴绘制针
        ctx.lineWidth = width;
        ctx.strokeStyle = color;
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }

    /*绘制表盘*/
    function drawDial(ctx) {
        let pi = Math.PI;

        ctx.clearRect(0, 0, 300, 300); //清除所有内容
        ctx.save();

        ctx.translate(150, 150); //一定坐标原点到原来的中心
        ctx.beginPath();
        ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周
        ctx.stroke();
        ctx.closePath();

        for (let i = 0; i < 60; i++) {//绘制刻度。
            ctx.save();
            ctx.rotate(-pi / 2 + i * pi / 30);  //旋转坐标轴。坐标轴x的正方形从 向上开始算起
            ctx.beginPath();
            ctx.moveTo(110, 0);
            ctx.lineTo(140, 0);
            ctx.lineWidth = i % 5 ? 2 : 4;
            ctx.strokeStyle = i % 5 ? "blue" : "red";
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        ctx.restore();
    }

</script>

</html>